import React from 'react';
import TheTable from "@/components/TheTable"
import TheQueryForm from '@/components/TheQueryForm';
import ThePagination from '@/components/ThePagination';
import CustomPage from '@/components/CustomPage'
import { servicerListPage } from '@/request/callOrder/orderList.js'

export default class DistributionServe extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      orderId: props.orderId ?? undefined, //整体订单id
      orderDetailId: props.orderDetailId ?? undefined, // 订单行id
      allocationType: props.allocationType, //分配方式 整单分配whole 单行分配single
      dataSource: [],
      columns: [
        {
          title: '服务者id',
          dataIndex: "providerId",
          key: "providerId",
        },
        {
          title: '服务者姓名',
          dataIndex: "name",
          key: "name",
        },
        {
          title: '类型',
          dataIndex: "provideType",
          key: "provideType ",
          render: (text) => {
            let provideType = ''
            switch (text) {
              case 1:
                provideType = '全职'
                break
              case 2:
                provideType = '兼职'
                break
              default:
                provideType = '-'
            }
            return provideType
          }
        },
        {
          title: '接单服务',
          render: (_, record) => {
            let feedCatStatus = null, feedDogStatus = null, bathCatStatus = null, bathDogStatus = null
            let arr = []
            if (record.feedCatStatus === 0) feedCatStatus = '喂猫'
            if (record.feedDogStatus === 0) feedDogStatus = '喂狗'
            if (record.bathCatStatus === 0) bathCatStatus = '洗猫'
            if (record.bathDogStatus === 0) bathDogStatus = '洗狗'
            arr = [feedCatStatus, feedDogStatus, bathCatStatus, bathDogStatus].filter(item => item !== null)
            if (arr.length > 0) {
              return arr.map(item => {
                return item
              }).join('、')
            } else {
              return '-'
            }
          }
        },
        {
          title: '距离（km）',
          dataIndex: "distance",
          key: "distance",
          render: (text) => {
            return text ? React.$transNum(text, 1, -3) : '-'
          }
        },
        {
          title: '可服务距离（km）',
          dataIndex: "serviceRange",
          key: "serviceRange",
          render: (text) => {
            return text ? React.$transNum(text, 0, -3) : '-'
          }
        },
        {
          title: '分配状态',
          dataIndex: "allocationStatus",
          key: "allocationStatus",
          render: (text) => {
            let allocationStatus = ''
            switch (text) {
              case 'ASSIGNED':
                allocationStatus = '已分配'
                break
              case 'REFUSE':
                allocationStatus = '已拒绝'
                break
              case 'RECEIVING':
                allocationStatus = '已接单'
                break
              default:
                allocationStatus = '未分配'
            }
            return allocationStatus
          }
        },
        {
          title: '同时段订单数',
          dataIndex: "sameTimeOrderCount",
          key: "sameTimeOrderCount",
          render: (text) => {
            return text ? text : 0
          }
        },
        {
          title: '最近操作时间',
          dataIndex: "recentlyOptTime",
          key: "recentlyOptTime",
          render: (text) => {
            return text ? text : '-'
          }
        }
      ],
      searchOption: [
        {
          field: 'distance',
          label: '距离',
          placeholder: '请选择距离',
          type: 'Select',
          options: [
            { label: '<3km', value: 3, },
            { label: '<5km', value: 5 },
            { label: '<10km', value: 10, },
            { label: '<30km', value: 30 }
          ],
          initialValues: 30
        },
        {
          field: 'provideType',
          label: '类型',
          placeholder: '全部',
          type: 'Select',
          options: [{ label: '全部', value: '' }, { label: '全职', value: 1, }, { label: '兼职', value: 2 }],
          initialValues: ''
        },
        {
          field: 'serviceType',
          label: '接单服务',
          placeholder: '全部',
          type: 'Select',
          mode: 'multiple',
          options: [{ label: '喂猫', value: 'feedCatStatus,0' }, { label: '喂狗', value: 'feedDogStatus,0' }, { label: '洗猫', value: 'bathCatStatus,0', }, { label: '洗狗', value: 'bathDogStatus,0' }],
        },
      ],//搜索内容
      queryForm: {
        distance: 30,
      },//搜索值
      isDistributionModal: props.open,
      pageData: { pageNo: 1, pageSize: 10 , prePageNos: [1]},
      total: 0,
      selectedRowKeys: [],
      selectedRows: [],
      version: props.version ?? undefined,//订单版本号
    }
  }
  componentDidMount() {
    let { orderId, allocationType, queryForm } = this.state
    if (orderId) {
      if (allocationType) { this.getData({ allocationType, ...queryForm }) }
    }
  }
  //获取数据
  getData = (values) => {
    let { orderId, queryForm, allocationType, orderDetailId } = this.state
    this.setState({
      queryForm: values === undefined ? queryForm : { ...values }
    }, async () => {
      let obj = {}
      if (values && values.hasOwnProperty('serviceType')) {
        values.serviceType.map(item => {
          let key = item.split(',') //数组中的数据改为对象格式
          obj[key[0]] = Number(key[1])
        })
        delete values.serviceType
      }
      delete this.state.queryForm.serviceType
      let params = {
        ...this.state.pageData,
        userOrderId: orderId,
        ...this.state.queryForm,
        ...obj,
        allocationType,
        userOrderDetailId: orderDetailId,
      }
      let res = await servicerListPage({ ...params })
      if (res.code === 0 && res.data) {
        let total = 0;
        if(res.data.rows != null &&  res.data.rows!= undefined && res.data.rows.length == res.data.pageSize){
          total = (res.data.pageNo)* res.data.pageSize +1;
        }
        let prePageNos = this.state.pageData.prePageNos;
        this.setState({
          dataSource: res.data.rows,
          pageData: {
            pageNo: res.data.pageNo,
            pageSize: res.data.pageSize,
            prePageNos: prePageNos
          },
          total: total
        })
      }
    })
  }
  //分页切换
  pageChange = (pageNo, pageSize, optType) => {
    let prePageNos= this.state.pageData.prePageNos;
    if('pre' === optType){
      if(this.state.pageData.prePageNos.length >1){
        pageNo = prePageNos[prePageNos.length-1];
        prePageNos = prePageNos.filter(item => item !== pageNo);
        pageNo = prePageNos[prePageNos.length-1];
      }else{
        return
      }
    }else{
      pageNo=pageNo+1;
      prePageNos.push(pageNo);
    }
    this.setState({ pageData: { pageNo, pageSize, prePageNos} },
      () => {
        this.getData()
      }
    )
  }
  //搜索
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 ,prePageNos:[1]}
    }, () => {
      this.getData(values)
    })
  }
  // 重置搜索
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  //勾选服务者
  onChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows: selectedRows,
      selectedRowKeys: selectedRowKeys
    }, () => {
      this.props.getSelectKeys(selectedRowKeys)
    })
  }
  render() {
    const { dataSource, columns, pageData: { pageSize, pageNo, prePageNos}, total, selectedRowKeys, searchOption } = this.state
    const rowSelection = {
      selectedRowKeys,
      hideSelectAll: true,
      preserveSelectedRowKeys: true,
      onChange: this.onChange,
      // getCheckboxProps: (record) => {
      //   return { disabled: record.allocationStatus === 'ASSIGNED' }
      // }
    }
    return (
      <div>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={searchOption}
          onGetValues={(values) => this.onFormSearch(values)}
          onReset={(values) => this.onReset(values)} >
        </TheQueryForm>
        <TheTable dataSource={dataSource} columns={columns} rowKey={record => record.providerId}
          rowSelection={rowSelection} />
         <CustomPage
          pageNo={pageNo}
          pageSize={pageSize}
          prePageNos={prePageNos}
          total={total}
          changePage={this.pageChange}
        ></CustomPage>
      </div>
    )
  }
}
